<template>
    <div>
<h2>房号列表显示</h2>
<div>
    房号查询： <input type="text" v-model="tiao.orderName">
    创建时间: <input type="date" v-model="tiao.createTime">--
    <input type="date" v-model="tiao.EndsTime">
    <input type="button" value="查询" @click="show" class="btn btn-success">
</div>
<table class="table table-bordered" border="1">
<tr>
    <td>房号</td>
    <td>所属房型</td>
    <td>创建时间</td>
    <td>状态</td>
    <td>备注信息</td>
    <td>所属房型预览图</td>
    <td>操作</td>
</tr>
<tr v-for="item in info.list">
    <td>{{item.orderName}}</td>
    <td>{{item.typeName}}</td>
    <td>{{moment(item.createTime).format('YYYY-MM-DD')}}</td>
    <td>{{item.state==0?"上架":"下架"}}</td>
    <td>{{item.orderDesc}}</td>
    <td><img :src="item.photo" alt="" width="60px" height="60px"></td>
    <td>
        <input type="button" value="编辑" class="btn btn-primary" @click="upd(item.id)">
        <input type="button" value="下架" v-if="item.state==0" @click="upState(item.id)" class="btn btn-primary">
        <input type="button" value="上架" v-else @click="upState(item.id)" class="btn btn-primary">
        <input type="button" value="排房" v-if="item.state==0" @click="PaiRoom(item.id)" class="btn btn-success">
        <input type="button" value="排房" v-else @click="PaiRoom('a')" class="btn btn-success">
    </td>
</tr>
</table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue';
import moment from 'moment';
import { useRoute, useRouter } from 'vue-router';

let route = useRoute();
let router = useRouter();

onMounted(()=>{
    show();//显示页面信息
})

///////////////////////////////////////////////////////////////////////////////////////
//显示信息
let info:any = ref({
    list: [],
});
//查询条件
let tiao:any=reactive({
    orderName:'',
    CreateTime:'',
    EndsTime:'',
})
/////////////////////////////////函数/////////////////////////////////////////////////////
//显示数据
const show=()=>{
    axios({
        url:'https://localhost:7080/api/RoomOrder/GetOrder',
        params:tiao,
        method:'get'
    })
    .then(res=>{
        info.value.list=res.data;
    })
}

//修改跳转
const upd=(id:any)=>{
    if(!confirm('确认要修改房号吗?')){
return;
    }
router.push({
    query:{id:id},
    path:'/upRoomOrder'
})
}

const upState=(id:any)=>{
    if(!confirm('确认要修改状态吗?')){
return;
    }
axios({
    url:'https://localhost:7080/api/RoomOrder/UpState',
    params:{id:id},
    method:'put'
})
.then(res=>{
    if(res.data>0){
        alert('修改状态成功');
    }else{
        alert('修改失败')
    }
    show();
})
}

//排房跳转
const PaiRoom=(id:any)=>{
    if(id=='a'){
alert('下架中不可排房');
return;
    }
router.push({
    query:{id:id},
    path:'/AddpaiRoom'
})
}
</script>

<style scoped>

</style>